<!-- 新增页面 /pages/project/add.vue -->
<template>
  <view class="container">
    <view class="form-wrapper">
      <!-- 表单内容 -->
      <view class="form-item">
        <text class="label required">项目名称</text>
        <input 
          v-model="formData.serviceName"
          class="input"
          placeholder="请输入项目名称"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label required">项目价格</text>
        <input 
          v-model="formData.price"
          class="input"
          type="number"
          placeholder="请输入价格"
          placeholder-class="placeholder"
        />
      </view>

      <view class="form-item">
        <text class="label required">项目类别</text>
        <picker 
          class="picker"
          :range="categories"
          @change="handleCategoryChange"
        >
          <view class="picker-content">
            {{ selectCategory || '请选择类别' }}
            <uni-icons type="arrowdown" size="16" color="#999"></uni-icons>
          </view>
        </picker>
      </view>

      <view class="form-item">
        <text class="label">项目介绍</text>
        <textarea 
          v-model="formData.description"
          class="textarea"
          placeholder="请输入项目介绍"
          placeholder-class="placeholder"
          auto-height
        />
      </view>

      <!-- 提交按钮 -->
      <view class="submit-btn">
        <button class="btn" @click="handleSubmit">提交保存</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getlist,add} from '@/api/mcslf/service'
// 表单数据
const formData = ref({
  serviceName: '',
  price: '',
  serviceCategory: '',
  description: ''
})
const selectCategory = ref("")
// 类别选项
const categories = ref(['车辆维修', '汽车保养', '专业洗车', '就近加油'])

// 处理类别选择
const handleCategoryChange = (e) => {
  const index = e.detail.value
  console.log(index);
  selectCategory.value = categories.value[index];
  formData.value.serviceCategory =   parseInt(index)+1;
  parseInt(index)
  console.log(formData.value.serviceCategory );
  // console.log(formData.value.serviceCategory);
}

// 表单验证
const validateForm = () => {
  if (!formData.value.serviceName.trim()) {
    uni.showToast({ title: '请输入项目名称', icon: 'none' })
    return false
  }
  if (!formData.value.price) {
    uni.showToast({ title: '请输入项目价格', icon: 'none' })
    return false
  }
  if (!formData.value.serviceCategory) {
    uni.showToast({ title: '请选择项目类别', icon: 'none' })
    return false
  }
  return true
}

// 提交处理
const handleSubmit = async () => {
  let res = await add(formData.value);
  console.log(res.code==200)
  if (res.code==200) {

    uni.navigateBack()
    formData.value = {
      serviceName: '',
      price: '',
      serviceCategory: '',
      description: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background: #f5f5f5;
  min-height: 100vh;
}

.form-wrapper {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.form-item {
  margin-bottom: 40rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
    
    &.required::before {
      content: '*';
      color: #e64340;
      margin-right: 8rpx;
    }
  }
}

.input {
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  
  &:focus {
    border-color: #007AFF;
  }
}

.picker-content {
  height: 80rpx;
  padding: 0 20rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
  
  &.placeholder {
    color: #999;
  }
}

.textarea {
  width: 100%;
  min-height: 200rpx;
  padding: 20rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.submit-btn {
  margin-top: 60rpx;
  
  .btn {
    background: #007AFF;
    color: #fff;
    border-radius: 40rpx;
    font-size: 32rpx;
    height: 88rpx;
    line-height: 88rpx;
    
    &::after {
      border: none;
    }
    
    &:active {
      opacity: 0.9;
    }
  }
}

.placeholder {
  color: #999;
  font-size: 28rpx;
}
</style>